<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        font-size: 16px;
        background: #CDCDCD;
    }

    header {
        height: 50px;
        background: #333;
        background: rgba(47, 47, 47, 0.98);
    }

    section {
        margin: 0 auto;
    }

    label {
        float: left;
        width: 100px;
        line-height: 50px;
        color: #DDD;
        font-size: 24px;
        cursor: pointer;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    header input {
        float: right;
        width: 60%;
        height: 24px;
        margin-top: 12px;
        text-indent: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
        border: none
    }

    input:focus {
        outline-width: 0
    }

    h2 {
        position: relative;
    }

    span {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        padding: 0 5px;
        height: 20px;
        border-radius: 20px;
        background: #E6E6FA;
        line-height: 22px;
        text-align: center;
        color: #666;
        font-size: 14px;
    }

    ol,
    ul {
        padding: 0;
        list-style: none;
    }

    li input {
        position: absolute;
        top: 2px;
        left: 10px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    p {
        margin: 0;
    }

    li p input {
        top: 3px;
        left: 40px;
        width: 70%;
        height: 20px;
        line-height: 14px;
        text-indent: 5px;
        font-size: 14px;
    }

    li {
        height: 32px;
        line-height: 32px;
        background: #fff;
        position: relative;
        margin-bottom: 10px;
        padding: 0 45px;
        border-radius: 3px;
        border-left: 5px solid #629A9C;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    }

    ol li {
        cursor: move;
    }

    ul li {
        border-left: 5px solid #999;
        opacity: 0.5;
    }

    li a {
        position: absolute;
        top: 2px;
        right: 5px;
        display: inline-block;
        width: 14px;
        height: 12px;
        border-radius: 14px;
        border: 6px double #FFF;
        background: #CCC;
        line-height: 14px;
        text-align: center;
        color: #FFF;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: all .5s;
    }

    li a:hover {
        background-color: red;
    }


    @media screen and (max-device-width: 620px) {
        section {
            width: 96%;
            padding: 0 2%;
        }
    }

    @media screen and (min-width: 620px) {
        section {
            width: 600px;
            padding: 0 10px;
        }
    }
</style>

<body>
    <!-- todolist案例 -->
    <div class="container" id="app">
        <header>
            <section>
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" v-model="todo" placeholder="请点击enter添加任务"
                    @keydown.enter="add" />
            </section>
        </header>
        <section class="section_">
            <h2>正在进行 <span id="todocount"></span></h2>
            <ol id="todolist" class="demo-box" v-for="(item,index) in list" :key="item.id">
                <li><input type="checkbox" :checked="item.done" @click="change1(index)">
                    <p>{{item.value}}</p><a id="0" @click="del1(index)"></a>
                </li>
            </ol>
            <h2>已经完成 <span id="donecount"></span></h2>
            <ul id="donelist" v-for="(item,index) in doneList" :key="item.id + 1">
                <li><input type="checkbox" :checked="item.done" @click="change2(index)">
                    <p>{{item.value}}</p><a id="0" @click="del2(index)"></a>
                </li>
            </ul>
        </section>

    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            todo: "",
            list: [],
            doneList: []
        },
        methods: {
            //添加任务
            add() {
                if (this.todo == "") return;
                this.list.unshift({
                    id: new Date().getTime(), //绑定一个id
                    value: this.todo,
                    done: false
                })
                this.todo = "";
                let list = [];
                this.list.forEach(item => {
                    list.unshift(item)
                    localStorage.setItem('list', JSON.stringify(list))
                });

            },

            //改变每个的状态
            change1(index) {
                this.list[index].done = !this.list[index].done;
                let list = this.list.filter(item => {
                    if (item.done == true) {
                        this.doneList.push(item)
                    } else {
                        return item;
                    }
                })
                this.list = list;
                // console.log(this.list);
                // console.log(this.doneList);
                this.save()
            },
            change2(index) {
                this.doneList[index].done = !this.doneList[index].done;
                let list = this.doneList.filter(item => {
                    if (item.done == false) {
                        this.list.push(item)
                    } else {
                        return item;
                    }
                })
                this.doneList = list;
                // console.log(this.list);
                // console.log(this.doneList);
                this.save()

            },
            //存入缓存
            save() {
                let lists = [];
                if (this.list.length ) {
                    this.list.forEach(item => {
                        lists.push(item)
                        localStorage.setItem('list', JSON.stringify(lists));
                    });
                }
                let doneLists = [];
                if (this.doneList.length) {
                    this.doneList.forEach(item => {
                        doneLists.push(item)
                        localStorage.setItem('doneList', JSON.stringify(doneLists))
                    });
                }

            },
            //删除
            del1(index) {
                let list = this.list;
                list.splice(index, 1);
                this.list = list;
                let lists = JSON.parse(localStorage.getItem('list'))
                lists.splice(index, 1);
                localStorage.setItem('list', JSON.stringify(lists))
            },
            del2(index) {
                let doneList = this.doneList;
                doneList.splice(index, 1);
                this.doneList = doneList;
                let doneLists = JSON.parse(localStorage.getItem('doneList'))
                doneLists.splice(index, 1)
                localStorage.setItem('doneList', JSON.stringify(doneLists))
            }


        },
        //挂载后
        mounted() {
            if (localStorage.getItem('list') && localStorage.getItem('doneList') != null) {
                let list = localStorage.getItem('list');
                let doneList = localStorage.getItem('doneList');
                this.list = JSON.parse(list)
                this.doneList = JSON.parse(doneList)
            } else {
                this.save()
            }
        },       
    })
 

</script>

</html>